<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>编辑文章</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <link rel="stylesheet" href="./libs/layui/css/layui.css" />
    <!-- jq -->
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./js/jqconfig.js"></script>
    <script src="./libs/tinymce_5.5.1/tinymce.min.js"></script>
    <script src="./libs/layui/layui.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="common_title">编辑文章</div>
      <div class="container-fluid common_con">
        <form class="form-horizontal article_form" id="form">
          <div class="form-group">
            <label for="inputTitle" class="col-sm-2 control-label"
              >文章标题：</label
            >
            <div class="col-sm-10">
              <input
                type="text"
                name="title"
                class="form-control title"
                id="inputTitle"
                value="文章标题文字"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCover" class="col-sm-2 control-label"
              >文章封面：</label
            >
            <div class="col-sm-10">
              <img src="./images/2.jpg" class="article_cover" />
              <input
                name="cover"
                type="file"
                id="inputCover"
                onchange="changeCoverImage()"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCategory" class="col-sm-2 control-label"
              >文章类别：</label
            >
            <div class="col-sm-4">
              <select
                id="category"
                class="form-control category"
                name="categoryId"
              ></select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">发布时间：</label>
            <div class="col-sm-4">
              <input
                id="articleDate"
                name="date"
                class="jeinput"
                type="text"
                placeholder="请选择发布日期"
                readonly
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label"
              >文章内容：</label
            >
            <div class="col-sm-10">
              <!-- 富文本编辑区域 -->
              <textarea id="articleContent">请输入文章内容</textarea>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button
                type="button"
                class="btn btn-success btn-edit"
                onclick="return saveArticle('已发布')"
              >
                修改
              </button>
              <button
                type="button"
                class="btn btn-default btn-draft"
                onclick="return saveArticle('草稿')"
              >
                存为草稿
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!-- 定义一个模板 -->

    <script src="./libs/art-template/template-web.js"></script>
    <script type="text/html" id="t1">
      {{each data}}

      <option value="{{$value.id}}">{{$value.slug}}</option>

      {{/each}}
    </script>

    <script>
      layui.use("laydate", function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
          elem: "#articleDate", //指定元素
        });

        tinymce.init({
          selector: "#articleContent",
          language: "zh_CN",
        });
        getlist();
        getcreatlist();
      });

      // 获取文章信息
      function getlist() {
        // 拿到本地存储的id
        let id = localStorage.getItem("editId");
        console.log(id);
        // 发送ajax
        $.ajax({
          type: "get",
          url: "/admin/article/search",
          data: { id },
          success: (res) => {
            console.log(res);

            // 将对应的内容填到相应的内容
            let data = res.data;
            $("#inputTitle").val(data.title);
            $(".article_cover").attr("src", data.cover);
            $("#category").val(data.categoryId);
            $("#articleDate").val(data.date);
            $("#articleContent").val(data.content);
          },
        });
      }
      // 文章类别
      function getcreatlist() {
        $.ajax({
          type: "get",
          url: "/admin/category/list",
          data: {},
          success: (res) => {
            console.log(res);
            $("#category").html(template("t1", res));
          },
        });
      }

      //选择图片
      function changeCoverImage() {
        let files = document.querySelector("#inputCover").files[0];
        console.log(files);
        // 将拿到的值转换为本地
        let url = URL.createObjectURL(files);
        console.log(url);
        // 把图片渲染到页面  然后提交
        $(".article_cover").prop("src", url);
      }
      //编辑 修改
      function saveArticle(state) {
        let id = localStorage.getItem("editId");
        let title = $("#inputTitle").val();
        // 用原生拿到图片的地址
        let cover = document.querySelector("#inputCover").files[0];

        let categoryId = $("#category").val();
        let date = $("#articleDate").val();
        // 文本框获取只能通过他自己的方式
        let content = tinyMCE.editors["articleContent"].getContent();
        console.log(id, title, cover, categoryId, date, content);
        // 创建一个formdata表单
        let fd = new FormData();
        // 将值最佳到fd表单
        fd.append("id", id);
        fd.append("title", title);
        fd.append("cover", cover);
        fd.append("categoryId", categoryId);
        fd.append("date", date);
        fd.append("content", content);
        fd.append("state", state);
        // 然后发送ajax
        $.ajax({
          type: "post",
          url: "/admin/article/edit",

          //将fd对象传进来
          data: fd,
          // 取消二进制
          contentType: false,
          processData: false,
          success: (res) => {
            console.log(res);
            location.href = "./article_list.html";
          },
        });
      }
    </script>
  </body>
</html>
